<style>
.image {
  width: 100%;
  display: block;
}
.col_4 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.member-chart {
  margin-top: 20px;
  margin-bottom: 20px;
}
.attendance {
  display: flex;
}
.attDate {
  display: flex;
  margin-left: 10%;
  width: 300px;
}
.dd-dataCenter-heading {
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
  padding-top: 5px;
  padding-left: 5px;
  font-weight: bold;
}
.padding-top20 {
  padding-top: 20px;
}
.dd-dataCenter-panel {
  max-width: 260px;
  width: 100%;
  height: 180px;
  border-radius: 4px;
  border: 1px solid #dfdfdf;
  box-shadow: 0;
  background: #fff;
  float: left;
  margin-right: 15px;
  margin-left: 15px;
  margin-bottom: 8px;
}
.dd-dataCenter-panel-hd {
  background: #cac9c9;
  color: #333;
  border-bottom: 1px solid #e8e8e8;
  font-size: 14px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0 16px;
  margin-bottom: 10px;
  padding-top: 10px;
  padding-bottom: 15px;
  line-height: 1;
  text-align: center;
}
.dd-person-status {
  width: auto;
  height: 35px;
  line-height: 35px;
  font-size: 14px;
  padding: 0 35px;
}
.pull-right {
  padding: 5px 5px;
  float: right;
  font-size: 16px;
}
</style>

<template>
  <basic-container>
    <el-container>
      <el-main id="el-main">
        <div class="col-sm-12 member-chart ng-isolate-scope el-card box-card is-always-shadow" style="padding:10px 5px;">
          <h4 class="dd-dataCenter-heading ng-binding" data-spm-anchor-id="0.0.0.i3.4bad77a3uZsHDb">业务维护
            <span class="text-muted ng-binding" data-spm-anchor-id="0.0.0.i4.4bad77a3uZsHDb"></span>
          </h4>
          <div class="col-sm-12">
            <div class="col-sm-12 member-chart ng-scope el-card box-card" style="padding:10px 15px 0 15px">
              <el-form :inline="true" :model="filters" size="small" ref="filters" class="searchForm">
                <el-form-item label="所属企业" prop="dept">
                  <el-input v-model="filters.dept" size="medium" disabled class="input-with-select">
                    <el-button slot="append" icon="el-icon-search" @click.native="handleDept"></el-button>
                  </el-input>
                </el-form-item>
                <span class="bth_search">
                  <el-form-item>
                    <el-button type="success" icon="el-icon-search" v-on:click="getDataGrid(true)">查询</el-button>
                  </el-form-item>
                  <el-form-item>
                    <el-button icon="el-icon-refresh" @click="resetSearchForm('filters')">重置</el-button>
                  </el-form-item>
                </span>
              </el-form>
            </div>
            <el-row id="toolbar_unit">
              <el-col :span="24">
                <div class="grid-content bg-purple-light">
                  <el-button type="success" size="mini" @click="handleFanancing" icon="el-icon-upload">处理</el-button>
                </div>
              </el-col>
            </el-row>

            <el-table :data="gridDatas" id="dataGrid" empty-text="当前企业没有该职工信息" :row-class-name="tableRowClassName" border size="mini" style="width: 100%;" height="280px">
              <el-table-column header-align="center" align="center" prop="index" :formatter="index_formatter" label="序号" width="60px"></el-table-column>
              <el-table-column header-align="center" align="center" prop="username" label="借款人" show-overflow-tooltip></el-table-column>
              <el-table-column header-align="center" align="center" prop="company" label="所属企业" show-overflow-tooltip></el-table-column>
              <!-- <el-table-column header-align="center" align="center" prop="idCard" label="身份证号" show-overflow-tooltip></el-table-column> -->
              <el-table-column header-align="center" align="center" prop="phone" label="联系方式" show-overflow-tooltip></el-table-column>
              <el-table-column header-align="center" align="center" prop="lx" label="类型" show-overflow-tooltip></el-table-column>
              <el-table-column header-align="center" align="center" prop="dk" label="贷款/存款金额(万元)" show-overflow-tooltip></el-table-column>
              <el-table-column header-align="center" align="center" prop="start" label="借款/存款时间" show-overflow-tooltip></el-table-column>
              <el-table-column header-align="center" align="center" prop="time" label="到期时间" show-overflow-tooltip></el-table-column>
              <el-table-column header-align="center" align="center" prop="status" label="状态" show-overflow-tooltip></el-table-column>

            </el-table>
          </div>
        </div>
      </el-main>
    </el-container>
  </basic-container>
</template>
<style>
.el-table .warning-row {
  background: Salmon;
}
</style>
<script>
import { getToken, setToken, removeToken, getFileIp } from '@/util/auth'
import request from '@/router/axios'
import deptTree from '../report/deptTree.vue'
export default {
  name: 'repairRegister',
  components: {
    deptTree
  },
  data() {
    return {
      title: '',
      statusOptions: [],
      treeDeptData: [],
      treeData: [
        {
          id: '1',
          leaf: false,
          name: '潍坊总部基地',
          children: [
            {
              id: 4,
              leaf: true,
              name: '北京云集汇通',
              children: []
            }
          ]
        },
        {
          id: '2',
          leaf: false,
          name: '北斗信息产业基地',
          children: [
            {
              id: 3,
              leaf: true,
              name: '蜂鸟智能科技有限公司'
            }
          ]
        }
      ],
      list: [],
      communityOptions: [],
      buildingOptions: [],
      unitOptions: [],
      sels: [], // 列表选中列
      houseOptions: [],
      addForm: [],
      addFormVisible: false,
      dialogDeptVisible: false,
      //单元过滤条件
      filters: {
        area: '',
        status: '',
        insurrance: '',
        dept: ''
      },
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      gridDatas: [],
      worningData1: [
        {
          index: 1,
          company: '北京云集汇通科技有限公司',
          username: '刘玉洁',
          idCard: '3704811993044321534',
          nation: '汉族',
          position: '研发工程师',
          education: '本科',
          marriage: '已婚',
          start: '2018-03-20',
          time: '2018-9-20',
          phone: 13869656585,
          type: 1,
          description: '该员工已离职',
          ck: 11.2,
          dk: 80,
          status: '本金已逾期',
          lx: '贷款'
        },
        {
          index: 1,
          company: '潍坊田志海生物制药有限公司',
          username: '詹丽君',
          idCard: '3704811993044321534',
          nation: '汉族',
          position: '高层管理',
          education: '本科',
          marriage: '已婚',
          start: '2018-03-20',
          time: '2018-9-20',
          phone: 17533688874,
          type: 1,
          description: '该员工已离职',
          ck: 11.2,
          dk: 80,
          status: '失信老赖名单',
          lx: '汇法网黑名单'
        },
        {
          index: 1,
          company: '北京云集汇通科技有限公司',
          username: '刘思思',
          idCard: '370481199306031534',
          nation: '汉族',
          position: '研发工程师',
          education: '本科',
          marriage: '已婚',
          start: '2016-12-28',
          time: '2019-02-28',
          type: 0,
          description: '该企业产能连续7天低于平均值50%',
          ck: 20.2,
          lx: '贷款',
          dk: 180,
          phone: 18763368874,
          status: '即将到期'
        },
        {
          index: 1,
          company: '北京云集汇通科技有限公司',
          username: '北京云集汇通科技有限公司',
          idCard: '370481199306031534',
          nation: '汉族',
          position: '研发工程师',
          education: '本科',
          marriage: '已婚',
          start: '2018-11-20',
          time: '2019-02-20',
          type: 0,
          phone: 13869656585,
          description: '无',
          ck: 6.2,
          dk: 18,
          lx: '贷款',
          status: '即将到期'
        },
        {
          index: 1,
          company: '北京云集汇通科技有限公司',
          username: '刘宇',
          idCard: '370481199333234534',
          nation: '汉族',
          position: '研发工程师',
          education: '本科',
          marriage: '已婚',
          start: '2016-03-20',
          time: '2018-03-20',
          type: 0,
          description: '该员工近30日没有上班记录',
          ck: 11.2,
          phone: 15061543325,
          dk: 80,
          status: '即将到期',
          lx: '45天期理财“利多多”'
        },
        {
          index: 1,
          company: '北京云集汇通科技有限公司',
          username: '北京云集汇通科技有限公司',
          idCard: '370481199333234534',
          nation: '汉族',
          position: '研发工程师',
          education: '本科',
          marriage: '已婚',
          start: '2016-03-20',
          time: '2018-03-20',
          type: 0,
          description: '该员工近30日没有上班记录',
          ck: 11.2,
          phone: 13869656585,
          dk: 80,
          status: '即将到期',
          lx: '一年期存款'
        }
      ],
      suggestTypeOptions: [],
      sort: {
        sort: 'sort',
        order: 'asc'
      },
      total: 0,
      page: 1,
      pageSize: 10,
      listLoading: false,
      sels: [],
      addFormRules: {
        liftUser: [
          {
            required: true,
            message: '请选择业主 '
          }
        ],
        description: [
          {
            required: true,
            message: '请填写问题描述 '
          }
        ]
      }
    }
  },
  methods: {
    getList() {
      if (this.filters.name == '史新峰') {
        this.list = this.liuyu
      } else if (this.filters.name == '李鹏伟') {
        this.list = this.zhangsan
      } else {
        this.list = []
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.type == 1) {
        return 'warning-row'
      }
      return ''
    },
    handleWorning() {
      this.addFormVisible = false
      this.$message({
        message: '预警成功',
        type: 'success',
        duration: 2000
      })
    },
    getNodeData(data) {
      this.dialogDeptVisible = false
      this.filters.dept = data.name
      console.log(data)
    },
    handleDept() {
      this.treeDeptData = this.treeData
      this.dialogDeptVisible = true
    },
    closeDept() {
      this.dialogDeptVisible = false
    },
    selsChange: function(sels) {
      this.sels = sels
    },
    index_formatter: function(row, column, cellValue, index) {
      //放回索引值
      return this.pageSize * (this.page - 1) + 1 + index
    },
    resetSearchForm() {
      this.filters.name = ''
      this.filters.idCard = ''
      this.filters.status = ''
      this.filters.area = ''
      this.filters.age = ''
    },
    getDataGrid() {
      this.total++
      if (this.total % 2 == 0) {
        this.gridDatas = this.worningData1
      } else {
        this.gridDatas = this.worningData1
      }
    },
    treeNodeClick(data, node) {
      if (data.leaf == true) {
        this.drawLine()
      }
    },
    handleFanancing() {
      this.addFormVisible = true
      this.title = '理财产品简介'
    },
    handleLoan() {
      this.addFormVisible = true
      this.title = '贷款产品简介'
    },
    addSubmit() {
      this.addFormVisible = false
      this.$message({
        message: '推送成功',
        type: 'success',
        duration: 2000
      })
    }
  },
  mounted() {
    this.getDataGrid()
  }
}
</script>
